var resource = function () {
    this.html = $(`<div class="p_abs resource"><div class="moveBar"></div></div>`);
    this.moveBar = this.html.find('.moveBar');
    this.tabsTitle = $('<div class="resource_tab_title_box"></div>').appendTo(this.html);
    this.tabsBody = $('<div class="resource_tab_body_box p_abs"></div>').appendTo(this.html);
    this.optionsTitle = $('<div class="resource_tab_title_item active" data-title="options">属性</div>').appendTo(this.tabsTitle);
    this.layersTitle = $('<div class="resource_tab_title_item" data-title="layers">图层</div>').appendTo(this.tabsTitle);
    this.historageTitle = $('<div class="resource_tab_title_item" data-title="historage">历史</div>').appendTo(this.tabsTitle);
    this.optionsBody = $('<div class="p_abs resource_tab_body_item active"></div>').appendTo(this.tabsBody);
    this.layersBody = $('<div class="p_abs resource_tab_body_item"></div>').appendTo(this.tabsBody);
    this.historageBody = $('<div class="p_abs resource_tab_body_item">').appendTo(this.tabsBody);
    var _this = this;

    this.tabsTitle.find('.resource_tab_title_item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var status = $(this).attr('data-title');
        _this[status + 'Body'].addClass('active').siblings().removeClass('active');
    });
    // this.formOptiosn = [];
};

resource.prototype.cancelViewerForm = function () {
    this.optionsBody.empty();
};

resource.prototype.renderViewerForm = function (formOptions) {
    this.optionsBody.empty();
    let _length = formOptions.length
    let height = this.optionsBody.height();
    let blockHeight = height - (25 * _length) - 1;
    var fiestLayoutTitle = null;
    for (let i = 0; i < formOptions.length; i++) {
        const formLayout = formOptions[i];
        const layout = $('<div class="fold_Layout" style="height:24px"></div>').appendTo(this.optionsBody);
        const title = $(`<div class="fold_Swith"><i>▶</i>${formLayout.name}</div>`).appendTo(layout);
        const body = $('<div class="fold_body"></div>').appendTo(layout);
        body.append(formLayout.html);
        body.height(blockHeight);
        title.click(() => {
            const bodyBlockHeight = height - (25 * _length) - 1;
            body.height(bodyBlockHeight);
            var layoutBlockHeight = height - (25 * (_length - 1));
            layout.addClass('active').height(layoutBlockHeight).siblings().removeClass('active').height(25);
        });
        if (!fiestLayoutTitle) fiestLayoutTitle = title;
    };
    fiestLayoutTitle.click();
};

resource.prototype.getChangeMoveBarOptions = function () {
    return {
        width: this.html.width(),
        height: this.html.height(),
        top: parseInt(this.html.css('top')),
        left: parseInt(this.html.css('left')),
        bottom: parseInt(this.html.css('bottom')),
        right: parseInt(this.html.css('right')),
    };
};
resource.prototype.changeMoveBarEvent = function (left, top, sign) {
    var width = sign.width - left;
    var ww = $(document).width()
    if (width < 210) width = 210;
    if (width > ww / 3) width = ww / 3;
    this.html.width(width);
};
export default resource
